<template>
  <div class="dashboard-container" align="center">
    <el-row v-if="depId=='005'||roleId=='005'">
      <el-col :span="18" style="padding-right: 1rem">
        <el-card class="box-card" style="padding-bottom: 1rem">
          <div slot="header" class="clearfix">
            <span>时效闹钟提示</span>
          </div>
          <el-table
            :data="alarmList"
            height="300"
            :show-header="false"
            v-if="roleId!='004'&&roleId!='005'"
            style="width: 100% ;font-size: 15px">
            <el-table-column align="center">
              <template slot-scope="scope">
                <el-alert
                  :title=scope.row.message
                  type="warning"
                  center
                  :closable="false"
                  show-icon>
                </el-alert>
              </template>

            </el-table-column>
          </el-table>
          <el-table
            :data="alarmAllList"
            height="300"
            v-if="roleId=='004'||roleId=='005'"
            :show-header="false"
            style="width: 100% ;font-size: 15px">
            <el-table-column align="center">
              <template slot-scope="scope">
                <el-alert
                  :title=scope.row.message
                  type="warning"
                  center
                  :closable="false"
                  show-icon>
                </el-alert>
              </template>

            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="padding-bottom: 1rem;height: 25.8rem">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
            <el-button
              style="float: right; padding: 3px 0 "
              type="text"
              @click="handleSelectionChange"
            >修改密码
            </el-button>
          </div>
          <div class="text item">姓名: {{ trueName }}</div>
          <div class="text item">手机号码: {{ telephone }}</div>
          <div class="text item">用户名: {{ loginName }}</div>
          <div class="text item">部门: {{ depName }}</div>
          <div class="text item">共录入伙伴数: {{ countPartner }}</div>
        </el-card>
      </el-col>

    </el-row>
    <el-row v-if="depId!='005'&&roleId!='005'">
      <el-card class="box-card" style="padding-bottom: 1rem">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
          <el-button
            style="float: right; padding: 3px 0 "
            type="text"
            @click="handleSelectionChange"
          >修改密码
          </el-button>
        </div>

        <div class="text item">姓名: {{ trueName }}</div>
        <div class="text item">手机号码: {{ telephone }}</div>
        <div class="text item">用户名: {{ loginName }}</div>
        <div class="text item">部门: {{ depName }}</div>
        <div class="text item">共录入伙伴数: {{ countPartner }}</div>
      </el-card>
    </el-row>


    <el-dialog
      title="更改密码"
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <el-form>
        <el-form-item>
          <span slot="label">原密码</span>
          <el-input v-model="password" type="text" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">新密码</span>
          <el-input v-model="newpassword" type="text" placeholder="请输入至少六位的新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">确认密码</span>
          <el-input v-model="confirmpassword" type="text" placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="open">确认更改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import $ from "@/api/assets";

  export default {
    data() {
      return {
        // /**
        //  * 分页数据
        //  */
        // val: "",
        // listLoading: true,
        // currentPage: 1,
        // pageSize: 10,
        // total: 0,
        /**
         * 内容数据
         */
        dialogTableVisible: false,
        loginName: "",
        countPartner: "",
        trueName: "",
        telephone: "",
        dingDing: "",
        depName: "",
        depId: "",
        roleId:"",
        password: "",
        confirmpassword: "",
        newpassword: "",
        // 闹钟列表
        alarmList: [],
        alarmAllList: [],
      };
    },
    created() {
      $.countCreateId().then(response => {
        if (response.success) {
          this.countPartner = response.data;
        }
      });
      $.findFromUserID().then(response => {
        if (response.success) {
          // console.log(response.data)
          this.trueName = response.data.trueName;
          this.telephone = response.data.telephone;
          this.loginName = response.data.loginName;
          this.depName = response.data.depName;
          this.depId = response.data.depId;
          this.roleId=response.data.roleId;
        }
      });
    },
    methods: {
      handleSelectionChange() {
        this.dialogTableVisible = true;
      },
      open() {
        if (this.newpassword.length < 6) {
          this.$message({
            type: "error",
            message: "新密码不能少于6位"
          });
        } else if (this.newpassword != this.confirmpassword) {
          this.$message({
            type: "error",
            message: "确认密码不一致"
          });
          this.password = "";
          this.newpassword = "";
          this.confirmpassword = "";
        } else {
          $.updatePass({
            loginName: this.loginName,
            loginPass: this.newpassword,
            passOld: this.password
          }).then(res => {
            if (res.data == "旧密码错误") {
              this.password = "";
              this.newpassword = "";
              this.confirmpassword = "";
              this.$message({
                type: "error",
                message: "原密码不正确"
              });
            } else {
              this.dialogTableVisible = false;
              this.$message({
                type: "success",
                message: "修改成功,你的新密码是: " + this.newpassword
              });
            }
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
